<template>
    <el-form-item label="创意标签" :prop="`industryClass.ad_keywords`">
        <div class="title_box">
            <div class="flexbox flexcenter flexbetween">
                <div class="flexbox flexcenter">
                    <el-input v-model="industryName" placeholder="输入标签名称，回车确定" size="small" style="width:240px;margin-right:12px" maxlength="10" show-word-limit @keyup.enter.native="addIndustryTitle"></el-input>
                    <el-button plain class="plain_blue" size="small" icon="el-icon-circle-plus-outline" @click="batchAddIndustry">批量添加</el-button>
                    <el-button plain size="small" @click="clearIndustry">清空</el-button>
                    <el-button type="primary" size="small" @click="isHotWordShow = !isHotWordShow">精选热词</el-button>
                </div>
                <span>已添加：{{createform.industryClass.ad_keywords.length}}/20</span>
            </div>
            <div class="hot_word" v-if="isHotWordShow">
                <div class="flexbox flexcenter flexjust word_search">
                    <el-input placeholder="请输入您的商品关键词" v-model="hotWrodQuery" style="width:300px" size="small">
                        <el-button slot="append" type="primary" size="small" icon="el-icon-search" @click="hotWrodSearch"></el-button>
                    </el-input>
                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" @click="isHotWordShow = false" class="close_word">
                        <path d="M11.0503 11.0503L20.9498 20.9498" stroke="#B4B7BD" stroke-width="2" stroke-linecap="round" />
                        <path d="M11.0503 20.9497L20.9498 11.0502" stroke="#B4B7BD" stroke-width="2" stroke-linecap="round" />
                    </svg>

                </div>
                <div class="hot_word_list flexbox" v-loading="hotWrod_loadding" element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.2)">
                    <span class="hot_word_item" v-for="item in hotWordList" :key="item.word" @click="addHotWord(item)">{{item.word}}</span>
                </div>
            </div>
            <div class="label_box flexbox">
                <div class="label_item flexbox flexcenter flexbetween" v-for="(item,index) in createform.industryClass.ad_keywords" :key="index">
                    <span>{{item}}</span>
                    <img src="../../../assets/img/close_label.svg" alt="" @click="deletIndustryTitle(index)">
                </div>
            </div>
        </div>
    </el-form-item>
</template>

<script>
export default {
    props: ["createform"],
    name: "",
    data() {
        return {
            industryName:'',
            isHotWordShow:false,
            hotWrodQuery:'',
            hotWrod_loadding:false,
            hotWordList:[],
        };
    },
    created() {},
    methods: {
        // 添加创意标签
        addIndustryTitle() {
            if (!this.industryName.trim()) {
                return;
            } else if (this.createform.industryClass.ad_keywords.length >= 20) {
                return;
            } else {
                this.createform.industryClass.ad_keywords.push(
                    this.industryName
                );
                this.industryName = "";
            }
            this.createform.industryClass.ad_keywords = [
                ...new Set(this.createform.industryClass.ad_keywords),
            ];
            this.sessionSave();
        },


        // 关键词搜索
        async hotWrodSearch() {
            this.hotWrod_loadding = true;
            const { data: res } = await this.$http.post(
                "launch/Getinfo/hot_words",
                {
                    word: this.hotWrodQuery,
                }
            );
            if (res.code !== 200) {
                this.hotWrod_loadding = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.hotWrod_loadding = false;
                this.hotWordList = res.data;
            }
        },

        // 批量添加创意标签
        batchAddIndustry() {
            const attr = {
                dialogVsb: true,
            };
            this.$bus.emit("batchAddIndustry", attr);
        },

        //清空创意标签
        clearIndustry() {
            this.createform.industryClass.ad_keywords = [];
            this.sessionSave();
        },

        // 添加热词
        addHotWord(item) {
            if (this.createform.industryClass.ad_keywords.length >= 20) {
                return;
            } else {
                this.createform.industryClass.ad_keywords.push(item.word);
            }
            this.createform.industryClass.ad_keywords = [
                ...new Set(this.createform.industryClass.ad_keywords),
            ];
            this.sessionSave();
        },

        // 删除创意标签
        deletIndustryTitle(index) {
            this.createform.industryClass.ad_keywords.splice(index, 1);
            this.sessionSave();
        },

        sessionSave() {
            this.$emit("sessionSave");
        },
    },
    components: {},
};
</script>


<style scoped>
</style>

